2-3 s (Links)

在說明連結之前,我們先要說明「絕對路徑」和「相對路徑」的差異。簡單的說,「相對路徑」就是相對於現在目錄的路徑表示法,因此「相對路徑」所指到的檔案或目錄,會隨著現在目錄的不同而改變。若一個路徑不屬於「相對路徑」,那就是「絕對路徑」,「絕對路徑」指的是一個絕對的位置,並不會隨著現在目錄的改變而改變。下面是有關於「絕對路徑」和「相對路徑」的比較和範例:

類別範例說明
絕對路徑file:///c:/windows/odbc.ini本機D槽上的一個 HTML 檔案
http://www.cs.nthu.edu.tw網路上一台 WWW Server 上的一個 HTML 檔案
/jang/courses/cs3431本機 WWW 根目錄下的一個目錄
相對路徑text.html表同一層目錄下的 text.html 檔案
./text.html表同一層目錄下的 text.html 檔案
image/text.gif表示 image 子目錄下的 text.gif 檔案
../index.html表示上一層目錄下的 index.html 檔案
../html40/cover.html表示上一層目錄下 html40 子目錄的 cover.html 檔案

通常我們用「.」代表現在目錄,而用「..」代表上一層目錄。

一般而言,除非有特殊需求,否則在 HTML 文件中,我們都盡量用相對路徑來表示網址。使用相對路徑的好處是:當我們將包含許多網頁的目錄轉移到另一個位置時,雖然絕對位置改變,但是在此目錄下的網頁相對位置並沒有改變,因此我們並不需要大幅修改網頁內的網址。

HTML 文件裡不可或缺的標籤就是 <a>, 因為有它的存在,使我們可以很迅速地連結到全世界各個地方的網頁。以下是一個簡單的範例:

Example(link01.htm):

上述範例的原始檔如下:

原始檔(link01.htm):(灰色區域按兩下即可拷貝)
<HTML>
<HEAD>    
	<TITLE> 基本連結 </TITLE>
</HEAD>
<BODY>
這是清華大學的<a href="http://www.nthu.edu.tw">首頁</a>(絕對網址)<br>
這是交通大學的<a href="http://www.nctu.edu.tw">首頁</a>(絕對網址)<br>
這是本教材的<a href="index.asp">範例首頁</a>(相對網址)
</BODY>
</HTML>

在上述範例中,我們可以使用 target 屬性,讓連結被點選時,網頁能夠開在新的視窗。在下面範例中,無論點選清大或交大的連結,都會開啟名為「new」的新視窗來顯示網頁:

Example(link02.htm):

上述範例的原始檔如下:

原始檔(link02.htm):(灰色區域按兩下即可拷貝)
<HTML>
<HEAD>    
	<TITLE> 基本連結 </TITLE>
</HEAD>
<BODY>
這是清華大學的<a target="new" href="http://www.nthu.edu.tw">首頁</a>(絕對網址)<br>
這是交通大學的<a target="new" href="http://www.nctu.edu.tw">首頁</a>(絕對網址)<br>
這是本教材的<a target="new" href="index.asp">範例首頁</a>(相對網址)
</BODY>
</HTML>

在上述範例中,若已有名為「new」的視窗存在,則網頁會呈現在此視窗內,而不再開新視窗。若要使每次點選都開新視窗,就可以使用 target="_blank",讀者請自己試試看!

連結除了可以跳到其他網頁之外,也可以在一份長的網頁之中上下跳動,例如,如果我們在一個網頁的最後一列加上<A name="LastLine">,那麼當我們點選下述連結時,就會跳回本頁的頁尾,例如:

Example(link03.htm):

上述範例的原始檔如下:

原始檔(link03.htm):(灰色區域按兩下即可拷貝)
<HTML>
<HEAD>    
	<TITLE> 基本連結:如何跳到某一列 </TITLE>
</HEAD>
<BODY>
這個網頁很長,但是按下<a href="#LastLine">這個連結</a>,就可以跳到最後一列,請試試看!
<xmp>



















</xmp>
<A name="LastLine">
這是最後一列!
</BODY>
</HTML>

除了可以連結到網頁以外,我們也可以連結到其他檔案,例如可以連結到數位音樂檔(MP3 或 MIDI)、聲音檔(WAV)、影像檔(GIF 或 JPEG 或 PNG)、電影檔(AVI 或 MPEG)等,請見下述範例:

Example(link04.htm):

上述範例的原始檔如下:

原始檔(link04.htm):(灰色區域按兩下即可拷貝)
<HTML>
<HEAD>    
	<TITLE> 基本連結:如何連結到多媒體檔案 </TITLE>
</HEAD>
<BODY>
連結至 jpeg 圖檔:<a href="multimedia/annie.jpg">annie.jpg</a><br>
連結至 gif 圖檔:<a href="multimedia/jordan2.gif">jordan2.gif</a><br>
連結至 mp3 聲音檔:<a href="multimedia/國歌.mp3">國歌.mp3</a>, <a href="multimedia/dreamlover.mp3">dreamlover.mp3</a><br>
連結至 midi 音樂檔:<a href="multimedia/原來你什麼都不想要.mid">原來你什麼都不想要.mid</a><br>
連結至 wav 聲音檔:<a href="multimedia/welcome.wav">welcome.wav</a><br>
連結至 mpeg 電影檔:<a href="multimedia/Tiger Show.mpeg">Tiger Show.mpeg</a><br>
連結至 pps PowerPoint 檔:<a href="multimedia/Moon Festival.pps">Moon Festival.pps</a>
</BODY>
</HTML>

Hint
當這些多媒體檔案被送到用戶端時,用戶端會根據檔案類型而呼叫不同的應用程式來播放或呈現。

以下是試驗區,你可以直接填入 HTML 的內容,按「送出測試」後,即可在新網頁看到呈現的結果。

Example(htmlTestLink.htm):


HTML 簡介與應用